<template>
  <div class="container">
    <v-chart v-if="showEchart" @click="onClick" :options="option" autoresize />
    <div class="noData" v-else :style="{ lineHeight: defaultH }">暂无数据</div>
  </div>
</template>
<script>
// import echarts from "echarts";
import ECharts from 'vue-echarts'
// 按需导入echarts的图形类型
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
// 导入工具部分
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
// register component to use
import 'echarts/lib/component/legendScroll'
// register component to use
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markArea'
import 'echarts/lib/component/dataZoom'
// import echartData from "./echartData.js";

export default {
  components: {
    'v-chart': ECharts,
  },
  props: {
    echartData: {
      type: Object,
      // default: {}
    },
    className: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
    Xinterval: {
      type: String,
      default: '0',
    },
    width: {
      type: String,
      default: '100%',
    },
    defaultH: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showEchart: false,
      option: {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#fff',
            fontSize: 18,
          },
          formatter: '',
          // formatter:'{b0}<br/>{a0}: {c0}%',//格式后面加单位
          // tooltipFormatter: function(params, ticket, callback) {
          //   let res = params[0].name;
          //   for (let i = 0, l = params.length; i < l; i++) {
          //     res +=
          //       "<br/><span style='display: inline-block;width:15px;height:15px;border-radius:50%;background-color:" +
          //       params[i].color +
          //       "'></span> : " +
          //       params[i].value +
          //       "%"; //要填充的内容
          //   }
          //   return res;
          // }
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        color: this.echartData.color || [
          '#05f8d6',
          // "#0082fc",
          '#fdd845',
          '#22ed7c',
          '#f47a75',
          '#b235e6',
        ],
        legend: {
          orient: 'horizontal',
          bottom: 0,
          textStyle: {
            color: '#fff',
            fontSize: 16,
          },
          // icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          // itemWidth: 10, // 设置宽度
          // itemHeight: 10, // 设置高度
          // itemGap: 40, // 设置间距
          // selectedMode:false,//取消图例上的点击事件
          data: this.echartData.legend,
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: [
          {
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: this.Xinterval || 0,
              rotate: 0,
              // rotate:40,
              textStyle: {
                color: '#ffffff',
                fontSize: 16,
              },
            },
            type: 'category',
            data: this.echartData.name || [],
          },
          {
            type: 'category',
            show: false,
            boundaryGap: false,
            data: this.echartData.name1 || [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: this.echartData.yAxisName || '',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14,
              nameLocation: 'start',
              // padding: 5
            },
            // min: 0,
            // max: 25,
            // interval: 5,
            splitNumber: 4,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0b3569',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              formatter: '{value}' + (this.echartData.labelformateLeft || ''),
            },
          },
          {
            type: 'value',
            name: this.echartData.yAxisName1 || '',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14,
              padding: 5,
            },
            // min: 0,
            // max: 25,
            // interval: 5,
            splitNumber: 4,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0b3569',
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              formatter: '{value}' + (this.echartData.labelformate || ''),
            },
          },
          {
            type: 'value',
            name: '',
            // min: 0,
            // max: 25,
            // interval: 5,
            splitNumber: 4,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0b3569',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              formatter: '{value}',
            },
          },
        ],
        series: [],
        // series: [
        //   {
        //     name: '',
        //     type: 'bar',
        //     stack: '总量',
        //     label: {
        //       show: true,
        //       color: '#ffffff',
        //       fontSize: 16,
        //       position: 'top',
        //       offset: [30, 20],
        //       formatter: '{c}',
        //     },
        //     barMaxWidth: 30,
        //     //配置样式
        //     itemStyle: {
        //       // 通常情况下：
        //       normal: {
        //         //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
        //         color: (params) => {
        //           // console.error(params.value , this.echartData.minNum[params.dataIndex]);
        //           // var colorList = ["#FF6F90", "#FFB36F", "#FF6F90"];
        //           // return colorList[params.dataIndex];
        //           // 判断是控制最小数值颜色变化
        //           if (this.echartData.minNum) {
        //             if (params.value < this.echartData.minNum[params.dataIndex]) {
        //               return this.echartData.singleColor[0]
        //             }
        //           }
        //         },
        //         fontSize: 16,
        //       },
        //     },
        //     data: [20, 30],
        //   },
        //   {
        //     name: '',
        //     type: 'line',
        //     smooth: true,
        //     // 显示数值
        //     itemStyle: {
        //       normal: {
        //         label: {
        //           show: true,
        //           // color: "#ffffff",
        //           fontSize: 16,
        //           position: 'left',
        //           formatter: '{c}' + this.echartData.labelformate,
        //         },
        //       },
        //     },
        //     yAxisIndex: 1,
        //     data: this.echartData.lineData,
        //   },
        //   {
        //     name: '',
        //     type: 'line',
        //     smooth: true,
        //     // 显示数值
        //     itemStyle: { normal: { label: { show: true } } },
        //     yAxisIndex: 1,
        //     data: [56, 68],
        //   },
        // ],
      },
    }
  },
  watch: {
    echartData: {
      handler(nVal, oVal) {
        if (nVal.data.length > 0) {
          this.showEchart = true
          if (JSON.stringify(nVal) != JSON.stringify(oVal)) {
            this.$nextTick(() => {
              this.initChart()
            })
          }
        } else {
          this.showEchart = false
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (this.echartData.data.length > 0) {
      this.showEchart = true
      this.$nextTick(() => {
        this.initChart()
      })
    } else {
      this.showEchart = false
    }
    // console.log(11, this.echartData, this.showEchart)
  },
  methods: {
    initChart() {
      if (this.echartData.tooltipFormatter) {
        this.option.tooltip.formatter = this.echartData.tooltipFormatter
      }
      if (this.echartData.color) {
        this.option.color = this.echartData.color
      }
      if (this.echartData.showMin) {
        this.option.yAxis[0].min = this.echartData.showMin
      }
      if (this.echartData.showMax) {
        this.option.yAxis[0].max = this.echartData.showMax
      }
      if (this.echartData.yShowMax1) {
        this.option.yAxis[1].max = this.echartData.yShowMax1
      }
      if (this.echartData.gridTop) {
        this.option.grid.top = this.echartData.gridTop
      }
      if (this.echartData.gridBottom) {
        this.option.grid.bottom = this.echartData.gridBottom
      }
      if (this.echartData.gridRight) {
        this.option.grid.right = this.echartData.gridRight
      }
      if (this.echartData.gridLeft) {
        this.option.grid.left = this.echartData.gridLeft
      }
      if (this.echartData.Xrotate) {
        this.option.xAxis[0].axisLabel.rotate = this.echartData.Xrotate
      }
      this.option.legend.data = this.echartData.legend
      this.option.xAxis[0].data = this.echartData.name
      this.option.series = this.echartData.data
    },
    onClick(params) {
      this.$emit("chartsClick", params);
    }
  },
}
</script>
<style lang="less"  scoped>
/**
 * The default size is 600px×400px, for responsive charts
 * you may need to set percentage values as follows (also
 * don't forget to provide a size for the container).
 */
.container {
  width: 100%;
  height: 100%;
  .noData {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 250px;
  }
}
.echarts {
  width: 100%;
  height: 100%;
}
</style>
